<!--  -->
<template>
  <div>
    <div class="flex items-center text-lg">
      <div
        class="region-name cursor-pointer hover:underline decoration-sky-500 underline-offset-8"
        @click="returnToRegion"
      >
        {{ regionName }}
      </div>
      <div v-if="selectName != ''" class="flex items-center">
        <el-icon><ArrowRightBold /></el-icon>{{ selectName }}
      </div>
    </div>

    <div v-if="selectName == ''" class="w-full h-[490px] overflow-y-scroll orderBody">
      <div
        v-for="(item, index) in tableData"
        :key="index"
        class="flex items-center py-3 px-5 text-xl cursor-pointer orderBody-item"
        :class="index == 0 ? 'line-color-0' : index == 1 ? 'line-color-1' : 'line-color-normal'"
        @click="moveToSelect(item)"
      >
        <div class="idx mr-4 shrink-0">{{ index + 1 }}</div>
        <div class="w-full">
          <div class="line-name flex justify-between">
            <div>{{ item.largetasktypename }}</div>
            <div>当前排队：{{ item.waitnum }}人</div>
          </div>
          <div class="line-body w-[100%] h-1 bg-white/20 rounded-lg">
            <div class="line-inner h-1 rounded-lg w-full"></div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="w-full h-[490px] overflow-y-scroll orderBody">
      <div
        v-for="(item, index) in tableData2"
        :key="index"
        class="flex items-center py-3 px-5 text-xl cursor-pointer orderBody-item"
        :class="index == 0 ? 'line-color-0' : index == 1 ? 'line-color-1' : 'line-color-normal'"
      >
        <div class="idx mr-4 shrink-0">{{ index + 1 }}</div>
        <div class="w-full">
          <div class="line-name flex justify-between">
            <div>{{ item.tasktypename }}</div>
            <div>当前排队：{{ item.waitnum }}人</div>
          </div>
          <div class="line-body w-[100%] h-2 bg-white/20 rounded-lg">
            <div class="line-inner h-1 rounded-lg w-full"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { requestApi } from '@/api'
import type {
  CountryQhList,
  windowWaitResponseItem,
  windowWaitSingleResponseITem
} from '@/types/baseTypes'
import { ArrowRightBold } from '@element-plus/icons-vue'
import { orderBy, reverse } from 'lodash'
import { onMounted, ref } from 'vue'
onMounted(() => {
  initDetail()
})
const props = defineProps<{
  selectPoint: CountryQhList
  regionName: string
  selectID: string
}>()
const tableData = ref<windowWaitResponseItem[]>([])
const initDetail = () => {
  //根据选中点查询相关排行
  requestApi
    .GetzqinfoList({
      token: 'Epoint_WebSerivce_**##0601',
      params: {
        centerguid: props.selectID
      }
    })
    .then((res) => {
      //根据大类名称分类
      let list: windowWaitResponseItem[] = []
      res.map((e) => (list = [...list, ...e.windowlist]))
      list.forEach((item) => (item.waitnum = parseInt(`${item.waitnum}`) as any))
      tableData.value = reverse(orderBy(list, 'waitnum'))
    })
}

const tableData2 = ref<windowWaitSingleResponseITem[]>([])

const selectName = ref('')
const returnToRegion = () => {
  selectName.value = ''
  initDetail()
}
const moveToSelect = (item: windowWaitResponseItem) => {
  requestApi
    .GetzqList({
      token: 'Epoint_WebSerivce_**##0601',
      params: {
        zqrowguid: item.zqrowguid,
        pageindex: 0,
        pagesize: 100
      }
    })
    .then((res) => {
      selectName.value = res.zqname
      res.tasklist.forEach((item) => (item.waitnum = parseInt(`${item.waitnum}`) as any))
      tableData2.value = reverse(orderBy(res.tasklist, 'waitnum'))
    })
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.orderBody-item {
  transition: all 0.5s;
  border-radius: 1rem;
  &:hover {
    cursor: pointer;
    background-color: #0a577b
    // background: linear-gradient(90deg, #0a577b, #0000);
  }
   &:active{
    cursor: pointer;
    background-color: #0000;
    // background: linear-gradient(90deg, #0a577b, #0000);
  }
}
</style>
